<html>
<body>
	<div id="roadmapTable"></div>
	<div id="selContainer">
		<input type="button" value="add" class="sel-new">
		<input type="button" value="save" class="sel-save">
		<input type="button" value="back" class="sel-toSitemap">
		<table border="1" cellspacing="0" id="selTable"></table>
		<div id="selForm"></div>
	</div>
	<div id="pageContainer">
		<input type="button" value="add" class="page-new">
		<input type="button" value="save" class="page-save">
		<input type="button" value="back" class="page-toSitemap">
		<table border="1" cellspacing="0" id="pageTable"></table>
		<div id="pageForm"></div>
	</div>
	<form id="pagingForm"></form>
	<div id="fieldContainer">
		<input type="button" value="add" class="field-new">
		<input type="button" value="save" class="field-save">
		<input type="button" value="back" class="field-toPage">
		<table border="1" cellspacing="0" id="fieldTable"></table>
		<div id="fieldForm"></div>
	</div>
	<div id="linkContainer">
		<input type="button" value="add" class="link-new">
		<input type="button" value="save" class="link-save">
		<input type="button" value="back" class="link-toPage">
		<table border="1" cellspacing="0" id="linkTable"></table>
		<div id="linkForm"></div>
	</div>
	
	<script id="roadmapTemplate" type="x-tmpl-mustache">
		<table border="1" cellspacing="0">
			<tr>
				<td>Name</td>
				<td></td>
			</tr>		
			{{#sitemaps}}
			<tr>
				<td>{{name}}</td>
				<td>
					<input type="button" value="enter" class="roadmap" data-param="{{name}}" >
					<input type="button" value="selector" class="sel-list" data-param="{{name}}" >
					<input type="button" value="delete" class="sel-remove" data-param="{{name}}" >
				</td>
			</tr>
			{{/sitemaps}}
			<tr>
				<td><input type="text" id="new-roadmap-name"></td>
				<td><input type="button" value="create" class="roadmap-add"></td>
			</tr>
		</table>
	</script>
	<script id="selTableTemplate" type="x-tmpl-mustache">
		<tr>
			<td>Name</td>
			<td>Selector</td>
			<td>Parent Selector</td>
			<td></td>
		</tr>		
		{{#ss}}
		<tr class="sel-edit" data-param="{{id}}">
			<td>{{name}}</td>
			<td>[{{id}}]{{selector}}</td>
			<td>{{parentElement.name}}</td>
			<td><input type="button" value="delete" class="sel-remove" data-param="{{id}}" ></td>
		</tr>
		{{/ss}}
	</script>
	<script id="selFormTemplate" type="x-tmpl-mustache">
		<table>
			<tr>
				<td>Name</td>
				<td><input type="text" id="selName" value="{{curSel.name}}"></td>
			</tr>
			<tr>
				<td>Parent Select</td>
				<td>
					<select id="parentSels" class="pselector">
						<option value='0'>Please select</option>
						{{#ss}}						
							<option value='{{id}}'>{{name}}</option>
						{{/ss}}
					</select>
					<input type="text" id="selSelector" class="selector" value="{{curSel.selector}}">
				</td>
			</tr>
		</table>
	</script>
	<script id="fieldTableTemplate" type="x-tmpl-mustache">
		<tr>
			<td>Title</td>
			<td>Selector</td>
			<td>Extractor</td>
			<td>Unique</td>
			<td></td>
		</tr>		
		{{#fields}}
		<tr class="field-edit" data-param="{{title}}">
			<td>{{title}}</td>
			<td>{{element.selector}}</td>
			<td>{{element.contentExtractor}}</td>
			<td>{{unique}}</td>
			<td><input type="button" value="delete" class="field-remove" data-param="{{title}}" ></td>
		</tr>
		{{/fields}}
	</script>
	<script id="fieldFormTemplate" type="x-tmpl-mustache">
		<table>
			<tr>
				<td>Title</td>
				<td><input type="text" id="fieldTitle" value="{{f.title}}"></td>
			</tr>
			<tr>
				<td>Selector</td>
				<td>
					<input type="hidden" class="pselector" value={{p.id}}>
					<input type="text" id="fieldSelector" class="selector" value="{{f.element.selector}}">
				</td>
			</tr>
			<tr>
				<td>Extractor</td>
				<td>
					<select id="extractorType" >
						<option value="text">text</option>
						<option value="attr">attribute</option>
					</select>
					<input id="extractorAttr" type="text" value="{{f.element.extractor.attr}}" disabled = "disabled">
					<input id="extractorProcess" type="text" value="{{f.element.extractor.process}}">
				</td>
			</tr>
			<tr>
				<td>Unique</td>
				<td><input type="checkbox" id="unique" ></td>
			</tr>
		</table>
	</script>
	<script id="linkTableTemplate" type="x-tmpl-mustache">
		<tr>
			<td>Page Name</td>
			<td>Action Type</td>
			<td>Selector</td>
			<td></td>
		</tr>		
		{{#linkedPages}}
		<tr class="link-edit" data-param="{{sourcePage.id}}" >
			<td>{{sourcePage.name}}</td>
			<td>{{paging.type}}</td>
			<td>{{paging.nextPageElement}}</td>
			<td><input type="button" value="delete" class="link-remove" data-param="{{sourcePage.id}}" ></td>
		</tr>
		{{/linkedPages}}
	</script>
	<script id="linkFormTemplate" type="x-tmpl-mustache">
		<table>
			<tr>
				<td>Page</td>
				<td>
					<select id="linkPage">
					<option value="">Select Page</option>
					{{#pp}}
						<option value="{{id}}">{{name}}</option>
					{{/pp}}					
					</select>
				</td>
			</tr>
			<tr>
				<td>Action Type</td>
				<td>
					<select id="linkType">
						<option value="url">url</option>
						<option value="scroll">scroll</option>
						<option value="click">click</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Selector</td>
				<td>
					<input type="hidden" class="pselector" value={{p.id}}>
					<input type="text" id="linkElement" class="selector" value="{{l.paging.nextPageElement.selector}}">
				</td>
			</tr>
		</table>
	</script>
	<script id="pageTableTemplate" type="x-tmpl-mustache">
		<table border="1" cellspacing="0">
			<tr>
				<td>Name</td>
				<td>Link</td>
				<td>Row Selector</td>
				<td></td>
			</tr>		
			{{#pages}}
			<tr class="page-edit" data-param="{{id}}">
				<td>{{name}}</td>
				<td>{{link}}</td>
				<td>[{{rowElement.id}}]{{rowElement}}</td>
				<td>
					<input type="button" value="remove" class="page-remove" data-param="{{id}}" >
					<input type="button" value="paging" class="paging-edit" data-param="{{id}}" >
					<input type="button" value="fields" class="field-list" data-param="{{id}}" >
					<input type="button" value="links" class="link-list" data-param="{{id}}" >
				</td>
			</tr>
			{{/pages}}
		</table>
	</script>
	<script id="pageFormTemplate" type="x-tmpl-mustache">
		<table>
			<tr>
				<td>ID</td>
				<td><input type="text" id="pageId" readonly="readonly" value="{{p.id}}"></td>
			</tr>
			<tr>
				<td>Name</td>
				<td><input type="text" id="name" value="{{p.name}}"></td>
			</tr>
			<tr>
				<td>Link</td>
				<td><input type="text" id="link" value="{{p.link}}"></td>
			</tr>
			<tr>
				<td>Row Selector</td>
				<td>
					<select class="selectors pselector">
						<option value='0'>Please select</option>
						{{#s}}						
							<option value='{{id}}'>{{name}}</option>
						{{/s}}
					</select>
					<input type="text" class="selector" id="rowElement" value="{{p.rowElement.selector}}">
				</td>
			</tr>
		</table>
	</script>
	<script id="pagingTemplate" type="x-tmpl-mustache">
		<table>
			<tr>
				<td>Action Type</td>
				<td>
					<select id="pagingType">
						<option value="url">url</option>
						<option value="scroll">scroll</option>
						<option value="click">click</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Next Page Selector</td>
				<td>
					<select class="selectors pselector">
						<option value='0'>Please select</option>
						{{#s}}						
							<option value='{{id}}'>{{name}}</option>
						{{/s}}
					</select>
					<input type="text" class="selector" id="nextPageElement" value="{{p.paging.nextPageElement.selector}}">
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="button" value="Cancel" class="paging-cancel" >
					<input type="button" value="Save" class="paging-save" >
				</td>
			</tr>
		</table>
	</script>
</body>
<script src="lib/jquery/jquery-2.1.1.min.js"></script>
<script src="lib/mustache.min.js"></script>
<script src="inspect/model.js"></script>
<script src="inspect/sample.json"></script>
<script src="inspect/ui.js"></script>
</html>